<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>08.3key 只是在兄弟节点之间必须唯一</title>
</head>

<body>
  <div id="root"></div>

  <!-- 加载 React。-->
  <script src="../js/react@16.development.js"></script>
  <script src="../js/react-dom@16.development.js"></script>
  <script src="../js/babel@6.min.js"></script>

  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">

    function Post(props) {
      return (
        <div id={props.id}>
          <h3> {props.title} </h3>
          <p> {props.content} </p>
        </div>
      )
    }

    function Blog(props) {
      const siderbar = (
        <ul>
          {props.posts.map((post) =>
            <li key={post.id}> {post.title} </li>
          )}
        </ul>
      );
      const content = (
        <ul>
          {props.posts.map((post) =>
            <Post
              key={post.id}
              id={post.id}
              title={post.title}
              content={post.content}
            />
          )}
        </ul>
      );
      return (
        <div>
          {siderbar}
          <hr />
          {content}
        </div>
      )
    }
    const posts = [
      { id: 1, title: '标题1', content: '内容1' },
      { id: 2, title: '标题2', content: '内容2' }
    ]
    ReactDOM.render(
      <Blog posts={posts} />,
      document.getElementById('root')
    );


  </script>
</body>

</html>